<template>
  <div class="series-part-bar">
    <span class="title">{{title}}<span class="total-time" v-if="timeDifferenceList.length > 0">（&nbsp;总计：{{totalTime}}小时&nbsp;）</span></span>
    <div class="right">
      <span class="add" v-if="isBtn && !disabled" @click="handleAdd">添加</span>
      <button class="toggle" @click="handleToggleFn"><iconSvg class="btn_icon" :name='isOpen ? "close" : "open"' w="28px" h="16px"></iconSvg></button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'seriesPartBar',
  data () {
    return {
      isOpen: false,
      totalTime: 0
    }
  },

  props:{
    timeDifferenceList:{
      type: Array,
      default(){
        return []
      }
    },
    isBtn:{
      type: Boolean,
      default: false
    },
    title:{
      type: String,
      default: ''
    },
    disabled:{
      type: Boolean, 
      default: false
    }
  },

  components: {},

  computed: {},

  watch:{
    timeDifferenceList:{
      handler(val, oldVal){
        this.$nextTick(()=>{
          this.computedTime()
        })
      },
      deep:true
    }
  },

  mounted() {
    this.$nextTick(()=>{
      this.computedTime()
    })
  },

  methods: {
    handleToggleFn() {
      this.isOpen = !this.isOpen
      this.$emit('isOpenEmit',this.isOpen)
    },
    handleAdd() {
      this.$emit('addEmit')
    },
    computedTime() {
      this.totalTime = 0
      this.timeDifferenceList.forEach((item)=>{
        if(item){
          this.totalTime += Number(item)
        }
      })
      this.totalTime = this.totalTime.toFixed(2)
    }
  }
}

</script>
<style lang="less" scoped>
.series-part-bar {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  font-size: 14px;
  color: #ffffff;
  background: #292a4d;
  border-radius: 4px;
  .right {
    .add {
      text-decoration: underline;
      color: rgb(69, 109, 230);
    }
    .toggle {
      outline: none;
      border: none;
      background: inherit;
      font-size: 14px;
      color: #fff;
    }
  }
  .total-time {
    font-size: 14px;
  }
}
</style>